<template>
	<view class="content">
		<view class="header">
			<text class="title">电站自助上线</text>
			<text class="subtitle">电站启用功能开放，支持测试模式(桩测试场景)、正式启用模式(对外经营场景)</text>
		</view>

		<!-- 测试模式卡片 -->
		<view class="card">
			<view class="card-content">
				<text class="card-title">测试模式</text>
				<text class="card-desc">电站启用功能开放，支持测试模式(桩测试场景)、正式启用模式(对外经营场景)</text>
				<view class="btn-enter" @click="handleEnterTest">
					<text>点击进入</text>
				</view>
			</view>
		</view>

		<!-- 正式启用模式卡片 -->
		<!-- <view class="card">
			<view class="card-content">
				<text class="card-title">正式启用模式</text>
				<text class="card-desc">介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍</text>
				<image class="qr-code" src="/static/images/qrcode.png" mode="aspectFit"></image>
				<view class="btn-enter" @click="handleEnterOfficial">
					<text>点击进入</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			handleEnterTest() {
				// 进入测试模式
				uni.navigateTo({
					url: '/pages/user/users/selfhelp/test'
				})
			},
			handleEnterOfficial() {
				// 进入正式模式
				uni.navigateTo({
					url: '/pages/user/users/selfhelp/official'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #76AF30 url('@/static/mine/help/self-help.png') no-repeat;
		background-size: 100% auto;
		min-height: calc(100vh - var(--window-top));
		padding: 0 30rpx 40rpx 30rpx;
	}

	.header {
		margin-bottom: 40rpx;
		padding-top: 420rpx;

		.title {
			font-size: 40rpx;
			color: #fff;
			font-weight: 600;
			font-family: "PINGFANG";
			display: block;
			margin-bottom: 20rpx;
		}

		.subtitle {
			font-size: 28rpx;
			color: #fff;
			font-family: "PINGFANG";
			line-height: 1.5;
		}
	}

	.card {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;

		.card-content {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.card-title {
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
			font-family: "PINGFANG";
			margin-bottom: 20rpx;
			align-self: flex-start;
		}

		.card-desc {
			font-size: 28rpx;
			color: #666;
			font-family: "PINGFANG";
			line-height: 1.5;
			text-align: left;
			margin-bottom: 30rpx;
		}

		.qr-code {
			width: 300rpx;
			height: 300rpx;
			margin: 20rpx 0;
		}

		.btn-enter {
			width: 100%;
			height: 88rpx;
			background: #1C6EFB;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-size: 32rpx;
				color: #FFFFFF;
				font-family: "PINGFANG";
			}
		}
	}
</style>